<template>
  <div>
    <h2>事件绑定指令</h2>

    <p>{{ age }}</p>
    <!-- 事件绑定指令语法   v-on:事件名="处理程序"  v-on: 可以简化成 @ -->
    <!-- <button v-on:事件名="处理程序">按钮</button>
    <button @事件名="处理程序">按钮</button> -->

    <!-- 事件处理程序，如果代码非常简单，直接写到 </template> 区域即可 -->
    <!-- 处理程序，代码只能vue中定义好的 data 数据 或 methods 方法 -->
    <!-- <button v-on:click="age++">+1</button> -->
    <button @click="age++">+1</button>

    <!-- 事件处理程序，如果代码非常多，可以使用方法。
    方法必须定义到 和 data 平级的 methods中 -->
    <button @click="changeAge">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "20",
    };
  },
  // methods 是存储方法的
  methods: {
    changeAge() {
      // vue中，找tada数据，methods方法......都是通过 this 直接找 【这是vue中固定的语法】
      this.age--;
      console.log(123);
    },
  },
};
</script>

<style>
</style>